{extend name="../template/admin/base.html" /}
{block name="index_right"}
<ul class="nav nav-tabs" role="tablist">
    <li><a href="{:url('goods/index')}">商品列表</a></li>
    <li class="active"><a href="{:url('goods/post')}">{$model['de_id']?'商品编辑':'商品添加'}</a></li>
</ul>


<form action="" method="POST" class="form-horizontal" role="form">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">商品管理</h3>
        </div>
        <div class="panel-body">
            <div class="form-group">
                <label for="" class="col-sm-2 control-label">商品名称</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" name="de_name" value="{$model['de_name']}">
                </div>
            </div>

            <div class="form-group">
                <label for="" class="col-sm-2 control-label">商品所属分类</label>
                <div class="col-sm-10">
                    <select name="pid" id="inputID" class="form-control">
                        <option value="0"> 顶级栏目</option>
                        {volist name="Category" id="vo"}
                        <option value="{$vo['cate_id']}"> {$vo['_cate_name']}</option>
                        {/volist}
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label for="" class="col-sm-2 control-label">商品排序</label>
                <div class="col-sm-10">
                    <input type="number" class="form-control" name="shop_sort" value="{$model['shop_sort']}">
                </div>
            </div>
            <div class="form-group">
                <label for="" class="col-sm-2 control-label">现价</label>
                <div class="col-sm-10">
                    <input type="number" class="form-control" name="now_price" value="{$model['now_price']}">
                </div>
            </div>
            <div class="form-group">
                <label for="" class="col-sm-2 control-label">库存</label>
                <div class="col-sm-10">
                    <input type="number" class="form-control" name="stock" value="{$model['stock']}">
                </div>
            </div>

            <div class="form-group">
                <label for="" class="col-sm-2 control-label">已销出</label>
                <div class="col-sm-10">
                    <input type="number" class="form-control" name="sell_out" value="{$model['sell_out']}">
                </div>
            </div>

            <div class="form-group">
                <label for="" class="col-sm-2 control-label">商品颜色</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" name="shop_color" value="{$model['shop_color']}">
                    <span class="help-block">请按照：白色@蓝色@紫色 输入</span>
                </div>
            </div>

            <div class="form-group">
                <label for="" class="col-sm-2 control-label">商品尺码</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" name="shop_size" value="{$model['shop_size']}">
                    <span class="help-block">请按照：X@XXl@XXXL  输入</span>

                </div>
            </div>

            <div class="form-group">
                <label for="" class="col-sm-2 control-label">列表图</label>
                <div class="col-sm-10">
                    <div class="input-group">
                        <input type="text" class="form-control" name="shop_thumb" readonly=""
                               value="{$model['shop_thumb']}">
                        <div class="input-group-btn">
                            <button onclick="upImage(this)" class="btn btn-default" type="button">选择图片</button>
                        </div>
                    </div>
                    <div class="input-group" style="margin-top:5px;">
                        {if condition="$model['shop_thumb']==''"}
                        <img src="__STATIC__/images/nopic.jpg" class="img-responsive img-thumbnail" width="150"
                             style="width: 100px">
                        {else /}
                        <img src="<?php if(is_file($model['shop_thumb'])){?>__STATIC__/../{$model['thumb']}<?php }else{ ?>__STATIC__/images/nopic.jpg <?php } ?>"
                             class="img-responsive img-thumbnail" width="150"
                             style="width: 100px;">
                        {/if}
                        <em class="close" style="position:absolute; top: 0px; right: -14px;" title="删除这张图片"
                            onclick="removeImg(this)">x</em>
                    </div>
                </div>
            </div>


            <div class="form-group">

                <label for="" class="col-sm-2 control-label">商品图册</label>
                <div class="col-sm-10">
                    <button onclick="upManyImage(this)" class="btn btn-default" type="button">选择图片</button>
                    <div id="box">
                        {if condition="$model['pics']!==''"}
                        <?php foreach(explode('@',$model['pics']) as $vo){?>
                        <li>
                            {if condition="$model['pics']==''"}
                            <img src="__STATIC__/nopic.jpg" alt="" style="width: 100px;">
                            {else /}
                            <img src="{$vo}" alt="" style="width: 100px;">
                            {/if}
                            <input type="hidden" name="pics[]" value="{$vo}">
                        </li>
                        <?php } ?>
                        {/if}

                    </div>
                    <script>
                        //上传图片
                        function upManyImage(obj) {
                            require(['util'], function (util) {
                                options = {
                                    //上传多图
                                    multiple: true,
                                };
                                util.image(function (images) {

                                    $(images).each(function (k, v) {
//                                          $("<img src='"+v+"'/>").appendTo('#box');
                                        var li = "<li>"
                                        li += "<img src='" + v + "' style='width: 50px'/>";
                                        li += '<input type="hidden" name="pics[]" value="' + v + '">';
                                        li += '<a onclick="delImg(this)" path="' + v + '" class="delImg" href="javascript:;" style="color: red">X</a>';
                                        li += "</li>";
                                        $(li).appendTo('#box');
                                    })
                                }, options)
                            });
                        }
                    </script>
                    <script>
                        //live、on、delegate、bind
                        function delImg(obj) {
                            //alert($(obj).attr('path'));
                            $.post("{:url('delImg')}", {path: $(obj).attr('path')}, function (res) {
                                if (res == 1) {
                                    $(obj).parents('li').remove();
                                }
                            }, 'json');
                        }
                    </script>
                    <style>
                        #box li {
                            list-style: none;
                            float: right;
                        }
                    </style>
                </div>
            </div>
            <div class="form-group">
                <label for="" class="col-sm-2 control-label">商品描述</label>
                <div class="col-sm-10">
                    <textarea id="container" name="describe"
                              style="height:300px;width:100%;">{$model['describe']}</textarea>
                    <script>
                        util.ueditor('container', {hash: 2, data: 'hd'}, function (editor) {
                            //这是回调函数 editor是百度编辑器实例
                        });
                    </script>
                </div>
            </div>
        </div>
    </div>
    <button class="btn btn-primary">提交</button>
</form>

<script>
    //上传图片
    function upImage(obj) {
        require(['util'], function (util) {
            options = {
                multiple: false,//是否允许多图上传
                //data是向后台服务器提交的POST数据
                data: {name: '后盾人', year: 2099},
            };
            util.image(function (images) {          //上传成功的图片，数组类型

                $("[name='shop_thumb']").val(images[0]);
                $(".img-thumbnail").attr('src', images[0]);
            }, options)
        });
    }

    //移除图片
    function removeImg(obj) {
        $(obj).prev('img').attr('src', '__STATIC__/nopic.jpg');
        $(obj).parent().prev().find('input').val('');
    }
</script>
{/block}